<template>
  <div class="container">
    <el-card shadow="always" >
      <el-row type="flex" justify="space-between">
        <p class="shuoming">说明:目前支持学科和关键字条件筛选</p>
        <el-button type="success"  @click="router.push('new')" size="small"><el-icon><EditPen /></el-icon>&nbsp; 新增试题</el-button>
      </el-row>
      <!-- 表单 -->
      <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px" size="medium"
    @submit.prevent>
    <el-row>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="学科" prop="subjectID">
          <el-select v-model="formData.subjectID" class="full-width-input" clearable>
            <el-option v-for="(item, index) in subjectIDOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="二级目录" prop="catalogID">
          <el-select v-model="formData.catalogID" class="full-width-input" clearable>
            <el-option v-for="(item, index) in catalogIDOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="标签" prop="tags">
          <el-select v-model="formData.tags" class="full-width-input" clearable>
            <el-option v-for="(item, index) in tagsOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="formData.keyword" type="text" clearable></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="试题类型" prop="questionType">
          <el-select v-model="formData.questionType" class="full-width-input" clearable>
            <el-option v-for="(item, index) in questionTypeOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="难度" prop="difficulty">
          <el-select v-model="formData.difficulty" class="full-width-input" clearable>
            <el-option v-for="(item, index) in difficultyOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="方向" prop="direction">
          <el-select v-model="formData.direction" class="full-width-input" clearable>
            <el-option v-for="(item, index) in directionOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="录入人" prop="creatorID">
          <el-select v-model="formData.creatorID" class="full-width-input" clearable>
            <el-option v-for="(item, index) in creatorIDOptions" :key="index" :label="item.label"
              :value="item.value" :disabled="item.disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="题目备注" prop="remarks">
          <el-input v-model="formData.remarks" type="text" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="企业简称" prop="shortName">
          <el-input v-model="formData.shortName" type="text" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6" class="grid-cell">
        <el-form-item label="城市" prop="province" style="font-weight: 700;">
          <el-select
            class="filter-item"
            style="width: 130px"
            v-model="formData.province"
            @change="handleProvince"
            filterable
          >
            <el-option
              v-for="item in provinceList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <el-select
            class="filter-item"
            style="width: 130px"
            v-model="formData.city"
            filterable
          >
            <el-option
              v-for="item in cityDate"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>

        </el-form-item>
      </el-col>
      <el-row type="flex" justify="end">
        <el-form-item>
          <el-button @click="onEmpty">清除</el-button>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-row>
    </el-row>
  </el-form>
    <!-- 标题组件信息 -->
    <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        >
    </el-alert>
    <!-- 表格信息 -->
    <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="number" label="试题编号"  />
    <el-table-column prop="subject" label="学科"  />
    <el-table-column prop="catalog" label="目录"  />
    <el-table-column prop="questionType" label="题型" width="80"  />
    <el-table-column label="题干" width="200" >
      <template v-slot="{row}">
        <p v-html="row.question"></p>
      </template>
    </el-table-column>
    <el-table-column prop="addDate" label="录入时间" width="180"  />
    <el-table-column prop="difficulty" label="难度"  />
    <el-table-column prop="creator" label="录入人"  />
    <el-table-column label="操作" width="200" >
      <template v-slot="{row}">
        <el-button type="primary" :icon="View" circle plain @click="preview(row)"/>
        <el-button type="success" :icon="EditPen" circle plain @click="router.push({path:'new',query:{id:row.id}})" />
        <el-button type="danger" :icon="Delete" circle plain @click="onDel(row)" />
        <el-button type="warning" :icon="Check" circle plain @click="onAppend(row)" />

      </template>
    </el-table-column>
    </el-table>
     <!-- 分页器 -->
    <el-row type="flex" justify="end" style="margin-top:3px ;">
    <el-pagination
    background
    :page-sizes="[5, 10, 20]"
    layout="prev, pager, next,sizes,jumper"
    :total="page.total"
    @current-change="onCurrentChange"
    @size-change="onSizeChange"
  />
  </el-row>
    </el-card>

    <!-- 预览弹出框 -->
    <el-dialog
    v-model="dialogVisible"
    title="题目预览"
    width="60%"
    :before-close="handleClose"
  >
  <!-- 组件引入 -->
<previewDialog :itemList="itemList"></previewDialog>
      <el-row class="dialog-footer" type="flex" justify="end">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </el-row>
  </el-dialog>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import previewDialog from '../components/Preview.vue'
import { View, EditPen, Delete, Check } from '@element-plus/icons-vue'
import { choiceAdd, list as tableList, remove, detail } from '@/api/hmmm/questions'
import {
  defineComponent,
  toRefs,
  reactive,
  getCurrentInstance,
  ref,
  onMounted
}
  from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { simple as subjectSimple } from '@/api/hmmm/subjects'
export default defineComponent({
  components: { previewDialog },
  props: {},
  setup () {
    const dialogVisible = ref(false)
    // todo 定义路由
    const router = useRouter()
    const state = reactive({
      // todo v-model绑定的信息
      formData: {
        subjectID: undefined,
        catalogID: undefined,
        tags: undefined,
        keyword: undefined,
        questionType: undefined,
        difficulty: undefined,
        direction: undefined,
        creatorID: undefined,
        remarks: undefined,
        shortName: undefined,
        province: undefined, // 城市
        city: undefined // 地区
      },
      rules: {},
      subjectIDOptions: [], // 学科
      catalogIDOptions: [{
        label: 'select 1',
        value: 1
      }, {
        label: 'select 2',
        value: 2
      }, {
        label: 'select 3',
        value: 3
      }], // 二级目录
      tagsOptions: [{
        label: 'select 1',
        value: 1
      }, {
        label: 'select 2',
        value: 2
      }, {
        label: 'select 3',
        value: 3
      }], // 标签
      questionTypeOptions: [{
        label: 'select 1',
        value: 1
      }, {
        label: 'select 2',
        value: 2
      }, {
        label: 'select 3',
        value: 3
      }], // 试题类型
      difficultyOptions: [{
        label: 'select 1',
        value: 1
      }, {
        label: 'select 2',
        value: 2
      }, {
        label: 'select 3',
        value: 3
      }], // 难度
      directionOptions: [{
        label: 'select 1',
        value: 1
      }, {
        label: 'select 2',
        value: 2
      }, {
        label: 'select 3',
        value: 3
      }], // 方向
      creatorIDOptions: [{
        label: 'select 1',
        value: 1
      }, {
        label: 'select 2',
        value: 2
      }, {
        label: 'select 3',
        value: 3
      }], // 录入人
      provinceList: [], // todo 城市列表
      cityDate: [] // todo 地区列表
    })
    // todo 列表定义
    const tableData = ref([])
    const instance = getCurrentInstance()
    const submitForm = () => {
      instance.ctx.$refs.vForm.validate(valid => {
        if (!valid) return
        // TODO: 提交表单
        console.log(111)
      })
    }
    const resetForm = () => {
      instance.ctx.$refs.vForm.resetFields()
    }
    // todo title定义
    const alertText = ref('')
    // todo  分页
    const page = reactive({
      page: 1,
      pagesize: 10,
      total: 1
    })
    // // todo 学科和关键字
    // const keywordItem = reactive({
    //   subjectID: undefined,
    //   keyword: undefined
    // })
    // todo 定义过滤器
    const moment = require('moment')
    //! 搜索
    function onSubmit () {
      getTableList()
    }
    //! 定义获取列表的方法
    async function getTableList () {
      const { data: { items, counts } } = await tableList({
        ...page, ...state.formData
      })
      alertText.value = `共 ${counts} 条记录`
      items.forEach(t => {
        t.addDate = moment(t.addDate).format('YYYY-MM-DD HH:mm:ss')
        // t.question = t.question.innerText
      })
      page.total = counts
      tableData.value = items
    }
    //! 分页页面切换
    function onCurrentChange (val) {
      page.page = val
      getTableList()
    }
    //! 分页页面数量
    function onSizeChange (val) {
      page.pagesize = val
      getTableList()
    }
    const itemList = reactive({})
    //! 预览当前题库
    async function preview (row) {
      const { data } = await detail(row)
      Object.assign(itemList, data)
      console.log(itemList)
      dialogVisible.value = true
    }
    //! 删除当前题库选项
    function onDel (row) {
      ElMessageBox.confirm(
        '此操作将永久删除该标签,是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          await remove(row)
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          getTableList()
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作成功'
          })
        })
    }
    //! 加入精选题库
    const choiceState = 1
    function onAppend (row) {
      ElMessageBox.confirm(
        '此操作将该题目加入精选,是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }
      )
        .then(async () => {
          await choiceAdd({ ...row, choiceState })
          ElMessage({
            type: 'success',
            message: '操作成功'
          })
          getTableList()
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作成功'
          })
        })
    }
    //! 获取学科简单列表
    async function getsubject () {
      const { data } = await subjectSimple()
      state.subjectIDOptions = data
    }
    //! 获取市份
    function getCityData () {
      state.provinceList = provinces()
    }
    //! 获取地区
    function handleProvince (e) {
      state.cityDate = citys(e)
      state.formData.city = state.cityDate[0]
    }
    //! 挂载阶段渲染内置mounted
    onMounted(() => {
      getTableList()
      getsubject()
      getCityData()
    })
    return {
      ...toRefs(state),
      submitForm,
      resetForm,
      tableData,
      page,
      getTableList,
      alertText,
      moment,
      onCurrentChange,
      onSizeChange,
      View,
      EditPen,
      Delete,
      Check,
      router,
      onDel,
      onAppend,
      choiceState,
      dialogVisible,
      preview,
      itemList,
      onSubmit,
      getsubject,
      getCityData,
      handleProvince
    }
  }
})

</script>

<style lang="scss">
  .el-input-number.full-width-input,
  .el-cascader.full-width-input {
    width: 100% !important;
  }

  .el-form-item--medium {
    .el-radio {
      line-height: 36px !important;
    }

    .el-rate {
      margin-top: 8px;
    }
  }

  .el-form-item--small {
    .el-radio {
      line-height: 32px !important;
    }

    .el-rate {
      margin-top: 6px;
    }
  }

  .el-form-item--mini {
    .el-radio {
      line-height: 28px !important;
    }

    .el-rate {
      margin-top: 4px;
    }
  }

  .clear-fix:before,
  .clear-fix:after {
    display: table;
    content: "";
  }

  .clear-fix:after {
    clear: both;
  }

  .float-right {
    float: right;
  }

</style>

<style lang="scss" scoped>

::v-deep .el-overlay-dialog {
    top: 105px;
}

.shuoming{
  font-size: 12px;
  color: #ffcce2;
}
  div.table-container {
    table.table-layout {
      width: 100%;
      table-layout: fixed;
      border-collapse: collapse;

      td.table-cell {
        display: table-cell;
        height: 36px;
        border: 1px solid #e1e2e3;
      }
    }
  }

  .label-left-align :deep(.el-form-item__label) {
    text-align: left;
  }

  .label-center-align :deep(.el-form-item__label) {
    text-align: center;
  }

  .label-right-align :deep(.el-form-item__label) {
    text-align: right;
  }

  .static-content-item {
    min-height: 20px;
    display: flex;
    align-items: center;

    :deep(.el-divider--horizontal) {
      margin: 0;
    }
  }

</style>
